<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>设备在线管理系统</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">
    <link rel="stylesheet" type="text/css" href="assets/js/gritter/css/jquery.gritter.css"/>
    <link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/zui.css">
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
    <link href="assets/css/index.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
        #device_number li {
            list-style: none;
            float: left;
            margin-left: 20px;
            padding: 10px 10px;
        }

        .device_category button {
            padding: 2px 6px;
        }
    </style>
</head>

<body>
<div id="app">

</div>
<section id="container">
    <!-- **********************************************************************************************************************************************************
    TOP BAR CONTENT & NOTIFICATIONS
    *********************************************************************************************************************************************************** -->
    <!--header start-->
    <header class="header black-bg">
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
        </div>
        <!--logo start-->
        <a href="index.html" class="logo" style="color: black"><b>设备管理系统</b></a>
        <!--logo end-->
        <div class="nav notify-row" id="top_menu">
        </div>
        <div class="top-menu">
            <ul class="nav pull-right top-menu">
                <li id="logout"><a v-on:click="logout" class="logout" href="#">Logout</a></li>
            </ul>
        </div>
    </header>
    <!--header end-->

    <!-- **********************************************************************************************************************************************************
    MAIN SIDEBAR MENU
    *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">

                <p class="centered"><a href="#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
                <h5 class="centered">{{username}}</h5>

                <li class="mt">
                    <a class="active" href="javascript:;" @click="listDevice(null)">
                        <i class="fa fa-desktop"></i>
                        <span>所有设备</span>
                    </a>
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" @click="listDevice(1)">
                        <i class="glyphicon glyphicon-home"></i>
                        <span>库存设备</span>
                    </a>
                    <!--<ul class="sub">-->
                    <!--<li><a  href="general.html">General</a></li>-->
                    <!--<li><a  href="buttons.html">Buttons</a></li>-->
                    <!--<li><a  href="panels.html">Panels</a></li>-->
                    <!--</ul>-->
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" @click="listDevice(2)">
                        <i class="glyphicon glyphicon-play"></i>
                        <span>使用中设备</span>
                    </a>
                    <!--<ul class="sub">-->
                    <!--<li><a  href="calendar.html">Calendar</a></li>-->
                    <!--<li><a  href="gallery.html">Gallery</a></li>-->
                    <!--<li><a  href="todo_list.html">Todo List</a></li>-->
                    <!--</ul>-->
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" @click="listDevice(3)">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>报废设备</span>
                    </a>
                    <!--<ul class="sub">-->
                    <!--<li><a  href="blank.html">Blank Page</a></li>-->
                    <!--<li><a  href="login.html">Login</a></li>-->
                    <!--<li><a  href="lock_screen.html">Lock Screen</a></li>-->
                    <!--</ul>-->
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="fa fa-cogs"></i>
                        <span>系统设置</span>
                    </a>
                    <ul class="sub">
                        <li><a href="">用户管理</a></li>
                        <li><a href="">菜单管理</a>
                            <ul class="sub">
                                <li><a href="">分类</a></li>
                                <li><a href="">地点</a></li>
                                <li><a href="">设备品牌</a></li>
                                <li><a href="">设备型号</a></li>
                                <li><a href="">工作性质</a></li>
                                <li><a href="">计量单位</a></li>
                            </ul>
                    </ul>
                </li>

            </ul>

            <!-- sidebar menu end-->
        </div>

    </aside>
    <!--sidebar end-->
    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-md-2" style="padding-right: 0">
                    <div class="panel panel-default pre-scrollable">
                       <div id="category-tree"></div>
                    </div>
                </div>
                <div id="device-list" class="col-md-10 main-chart" style="padding-left: 0">
                    <search-device :selection="searchSelection"></search-device>
                    <div class="content-panel table-responsive">
                        <h4 style="float: left"><i class="fa fa-angle-right"></i>
                            设备详情
                        </h4>
                        <div class="turn-page-right">
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#add-device">添加设备</button>
                            <button type="button" class="btn btn-info">
                                导出为Excel
                            </button>
                        </div>
                        <div class="clear"></div>
                        <hr>
                        <table class="table table-striped table-advance table-hover table-condensed cf">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>设备名称</th>
                                <th>类别</th>
                                <th v-if="queryParams.statusId!=1">使用部门</th>
                                <th>设备品牌</th>
                                <th>设备型号</th>
                                <th>国资编号</th>
                                <th>序列号</th>
                                <th>所在校区</th>
                                <th v-if="queryParams.statusId!=1">领用时间</th>
                                <th>工作性质</th>
                                <th>保管人</th>
                                <th>单价（元）</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="device in deviceList">
                                <td>{{device.id}}</td>
                                <td>{{device.name}}</td>
                                <td>{{device.categoryStr}}</td>
                                <td v-if="queryParams.statusId!=1">{{getDepartment(device.locationStr)}}</td>
                                <td>{{device.brand!=undefined?device.brand.name:'未填写'}}</td>
                                <td>{{device.deviceModel}}</td>
                                <td>{{device.nationalId}}</td>
                                <td>{{device.serialNumber}}</td>
                                <td>{{device.locationStr.split('/')[0]}}</td>
                                <td v-if="queryParams.statusId!=1">{{formatTime(device.useTime,device.statusId)}}</td>
                                <td>{{device.workNature}}</td>
                                <td>{{device.custodian}}</td>
                                <td>{{device.unitPrice}}</td>
                                <td>{{parseStatus(device.statusId)}}</td>
                                <td>
                                    <button @click="showDistributeModal(device.id)" v-if="device.statusId==1" class="btn btn-success btn-xs"><i class="fa fa-check"></i>分发</button>
                                    <button @click="showDiscardModal(device.id)" v-if="device.statusId==2" class="btn btn-danger btn-xs"><i class="fa fa-dropbox"></i>报废</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <div class="page-info-left">
                            当前页码：{{queryParams.queryPage.pageNum}}，共{{pages}}页，总计{{total}}条
                        </div>
                        <div class="turn-page-right">
                            <button @click="lastPage" v-bind:disabled="disableLastPage" type="button"
                                    class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span>
                            </button>
                            <button @click="nextPage" v-bind:disabled="disableNextPage" type="button"
                                    class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span>
                            </button>
                        </div>
                        <div class="clear"></div>
                    </div>

                </div><!-- /col-lg-9 END SECTION MIDDLE -->

            </div>
            <! --/row -->
        </section>
    </section>

    <!--main content end-->

</section>

<!--添加设备模态框-->
<div id="add-device" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="add-device">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加设备</h4>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                    <label for="input-category">分类</label>
                    <select v-model="device.categoryIds[0]" id="input-category" class="form-control">
                        <option disabled value="">请选择</option>
                        <option v-for="category in selection.categoryList" v-bind:value="category.id">{{category.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-partition">校区</label>
                    <select v-model="device.locationId" id="input-partition" class="form-control">
                        <option disabled value="">请选择</option>
                        <option v-for="location in selection.locationList" v-bind:value="location.id">{{location.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-device-name">名称</label>
                    <input v-model="device.name" type="text" class="form-control" id="input-device-name" placeholder="名称">
                </div>
                <div class="form-group">
                    <label for="input-nationalId">国资编号</label>
                    <input v-model="device.nationalId" type="text" class="form-control" id="input-nationalId" placeholder="国资编号">
                </div>
                <div class="form-group">
                    <label for="input-serialNumber">序列号</label>
                    <input v-model="device.serialNumber" type="text" class="form-control" id="input-serialNumber" placeholder="序列号">
                </div>
                <div class="form-group">
                    <label for="input-brand">品牌</label>
                    <select v-model="device.brandId" id="input-brand" class="form-control">
                        <option disabled value="">请选择</option>
                        <option v-for="brand in selection.brandList" v-bind:value="brand.id">{{brand.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-deviceModel">型号</label>
                    <select v-model="device.deviceModelId" id="input-deviceModel" class="form-control">
                        <option disabled value="0">请选择</option>
                        <option v-for="deviceModel in selection.deviceModelList" v-bind:value="deviceModel.id">{{deviceModel.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-workNature">工作性质</label>
                    <select v-model="device.workNatureId" id="input-workNature" class="form-control">
                        <option disabled value="">请选择</option>
                        <option v-for="workNature in selection.workNatureList" v-bind:value="workNature.id">{{workNature.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-custodian">保管人</label>
                    <select v-model="device.custodianId" id="input-custodian" class="form-control">
                        <option disabled value="">请选择</option>
                        <option v-for="custodian in selection.custodianList" v-bind:value="custodian.id">{{custodian.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="input-unitPrice">单价</label>
                    <input v-model="device.unitPrice" type="number" class="form-control" id="input-unitPrice" placeholder="单价">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button @click="addDevice" type="button" class="btn btn-success">添加</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>
<!--分发设备组件-->
<div id="device-modals"></div>
<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/js/jquery.sparkline.js"></script>
<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>
<script type="text/javascript" src="assets/js/gritter/js/jquery.gritter.js"></script>
<script type="text/javascript" src="assets/js/gritter-conf.js"></script>
<!--script for this page-->
<script src="assets/js/sparkline-chart.js"></script>
<script src="assets/js/zabuto_calendar.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/module/common.js"></script>
<script src="assets/js/module/index.js"></script>

</body>
</html>
